
<template>
    <div class="addArticles">
        <div class="SearchTop add-thead">
            <!-- <div class="LevelMenu3">
                <span @click="$router.back(-1)">文章中心 > </span> <span style="color:#0096FF">{{ title }}</span>
            </div> -->
            <div class="funZone">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button type="primary" class="BoxHS-btn" @click="save">
                            <el-icon>
                                <img src="../../../../assets/images/app/baocun.png" />
                            </el-icon>
                            保存
                        </el-button>
                        <el-button type="primary" class="BoxHS-btn" @click="ExitEditor">
                            <el-icon>
                                <img src="../../../../assets/images/app/tuichu.png" />
                            </el-icon>
                            退出编辑
                        </el-button>
                    </el-form-item>
                    <el-form-item class="right_btn">
                        <div class="QR-codes" v-if="qrCodeShow">
                            <i>
                                <QrCode :value="form.qrCode" :size="size" level="H" class="codeBox"></QrCode>
                            </i>
                            <span> 手机扫码预览</span>
                        </div>
                        <div class="ReleaseArea" v-if="activeStatus == 0">
                            <el-radio-group v-model="radio1" @change="Release($event)">
                                <el-radio :label="1" class="time-interval-release">
                                    <span class="label">定时发布：</span>
                                    <div class="date-picker">
                                        <el-date-picker v-model="date1" type="date" placeholder="请选择日期"
                                            value-format="YYYY-MM-DD" style="width: 100%" @change="selectTime"
                                            :disabledDate="disabledDateFun" />
                                        <el-time-picker v-model="date2" @change="selectTime2" value-format="HH:mm:ss"
                                            :disabledDate="disabledTimeFun" type="datetime" placeholder="请选择时间"
                                            style="width: 100%" />
                                        <el-button type="primary" v-if="timepickerShow" @click="timingReleaseSubmit">确定
                                        </el-button>
                                        <el-button v-else>确定</el-button>
                                    </div>
                                </el-radio>
                                <el-radio :label="2" class="release-soon">
                                    <el-button type="primary" class="BoxHS-btn" @click="releaseSoon" v-if="isLight">
                                        <el-icon>
                                            <img src="../../../../assets/images/app/fabu222.png" />
                                        </el-icon>
                                        立即发布
                                    </el-button>
                                    <el-button class="BoxHS-btn" v-else>
                                        <el-icon>
                                            <img src="../../../../assets/images/app/fabu111.png" />
                                        </el-icon>
                                        立即发布
                                    </el-button>
                                </el-radio>
                            </el-radio-group>

                        </div>
                        <div class="ReleaseArea" v-if="activeStatus == 2 ">
                            <el-button type="primary" class="BoxHS-btn" @click="releaseSoon">
                                <el-icon>
                                    <img src="../../../../assets/images/app/fabu222.png" />
                                </el-icon>
                                重新发布
                            </el-button>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="Body-content-block">
            <el-form :model="form" :rules="rules" ref="ruleFormRef" :inline="true">
                <div class="Content-left">
                    <el-row>
                        <el-col>
                            <el-form-item label="标题：" prop="title">
                                <el-input v-model="form.title" placeholder="15个字以内" clearable maxlength="15"
                                    @input="titleChange" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="副标题：" prop="subtitle">
                                <el-input v-model="form.subtitle" placeholder="15个字以内" clearable maxlength="15" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="摘要：" prop="summary">
                                <el-input v-model="form.summary" type="textarea" placeholder="50个字以内" clearable
                                    maxlength="50" show-word-limit />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="文章分组：" prop="resourceGroupId">
                                <div class="fenzu">
                                    <el-select v-model="form.GroupId" placeholder="请选择" clearable @change="changeGroup">
                                        <el-option v-for="item in group1" :key="item.id" :label="item.nodeAllTreeName"
                                            :value="item.id" />
                                    </el-select>
                                    <el-select v-model="form.resourceGroupId" placeholder="请选择" clearable
                                        @change="changeGroup2">
                                        <el-option v-for="item in group2" :key="item.id" :label="item.nodeAllTreeName"
                                            :value="item.id" />
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="文章来源：" prop="articleSource">
                                <ul>
                                    <li v-for="(item, i) in Source" :key="i"
                                        :class="i == active ? 'activeBtn Source-btn' : 'Source-btn'"
                                        @click="changeSource(i)">{{ item }}</li>

                                </ul>
                                <el-input v-model="form.articleSource" class="Reprinted-source" type="textarea"
                                    clearable v-show="showInput" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="展示主图：">
                                <div class="bannerShow">
                                    <el-tabs :tab-position="tabPosition" v-model="activeBanner" class="demo-tabs">
                                        <el-tab-pane v-for="(item, i) in bannerList" :key="item.mediaUrl">
                                            <template #label :name="i">
                                                <span class="custom-tabs-label" @click="imgSelect(i)">
                                                    <div class="images" v-if="item.mediaUrl == ''">
                                                        <img src="@/assets/images/app/tu2.png"
                                                            :title="'第' + (i + 1) + '张'" />
                                                    </div>
                                                    <div v-if="item.mediaUrl != ''" class="isImages">
                                                        <img :src="item.mediaUrl"
                                                            :title="'第' + (Number(i) + 1) + '张'" />
                                                        <i @click="imgDelete(i)">-</i>
                                                    </div>
                                                </span>
                                            </template>
                                            <div class="custom-up">
                                                <div class="pic-btns">
                                                    <el-button @click="choosePic(i)">相册选择
                                                    </el-button>
                                                    <ImageUpload ref="uploadBanner" v-model="banners"
                                                        @UploadSuccess="UploadSuccess" />
                                                </div>
                                                <p class="tips">说明：支持图片格式 PNG JPG；上传图片不超过5M；
                                                    图片尺寸：690x390；图片比例：16:9；
                                                </p>
                                                <div class="picture-show" v-if="item.mediaUrl == ''">
                                                    <el-image :src="url" fit="fill" />
                                                </div>
                                                <div class="picture-show" v-else>
                                                    <div class="displayType" v-if="item.displayType == 2"
                                                        @click="displayType(item, i)">设置为文章封面</div>
                                                    <div class="displayType" v-if="item.displayType == 1"
                                                        style="cursor:default">已设为文章封面</div>
                                                    <el-image :src="item.mediaUrl" fit="fill" />
                                                </div>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div class="text-content" prop="articleContent">
                    <TEditor ref="editor" id="articleEditor" v-model="form.articleContent" @input="GetContent">
                    </TEditor>
                </div>
            </el-form>
            <choosePhotoAlbum ref="PhotoAlbum" @isChoose="photoChoose"></choosePhotoAlbum>
        </div>

    </div>
</template>
<script setup>
import ImageUpload from "@/components/ArticlesImageUpload"
import TEditor from "@/components/Tinymce/TEditor"
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import { addArticle, articleGroup, updateArticle, getArticleBasic, updateArticleStatus } from '@/api/CMS/article'
import QrCode from 'qrcode.vue'
import tu1 from '../../../../assets/images/app/tu1.png'
import choosePhotoAlbum from './choosePhotoAlbum'
import { onUnmounted } from 'vue'
const { proxy } = getCurrentInstance();
const $route = useRoute()
const router = useRouter();
var url = tu1
const language = ref('zh_CN')
const skin = ref('oxide')
const active = ref(1);
const group1 = ref([])//文章分组下拉
const group2 = ref([])//文章分组下拉
const showInput = ref(false)
const tabPosition = ref('bottom')
const bannerList = ref([{ name: '', mediaUrl: '', mediaType: '', sort: '1', displayType: 2 }, { name: '', mediaUrl: '', mediaType: '', sort: '2', displayType: 2 }, { name: '', mediaUrl: '', mediaType: '', sort: '3', displayType: 2 }])
const title = ref('新增文章')
const mediaPic = {}//封面图
const radio1 = ref('')
const timepickerShow = ref(false)
const isLight = ref(false)
const date1 = ref(undefined)
const date2 = ref(undefined)
const contentHasSave = ref(false)//记录是否点击提交了
const qrCodeShow = ref(false)//二维码
let size = ref(74)//二维码尺寸
let flagChange = 0;//表单 默认值
const isChange = ref(false); // 表单值是否有改变
const articleId = ref('');
const activeBanner = ref(0)
const activeStatus = ref(0)
const data = reactive({
    form: {
        GroupId: 1000,
        resourceGroupId: 1100,
        qrCode: '',
        title: '',
        timingReleaseStatus: false,
        timingReleaseTime: undefined,

    },
    Source: ['转载自', '原创'],
    rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        resourceGroupId: [{ required: true, message: "文章分组不能为空", trigger: "blur" }],

    },
    parentId: 0,
    banners: '',
    timer: null,
    timer2: null,

});

const { form, rules, Source, parentId, banners, timer, timer2 } = toRefs(data);
console.log('$route.query.id', $route.query.articleId)

/**编辑页面的时候回显的信息 */
if ($route.query.articleId != undefined) {
    articleId.value = $route.query.articleId
    getArticleBasic(articleId.value).then(res => {
        //  console.log('文章详情', res)
        if (res.code == 200) {
            qrCodeShow.value = true;
            form.value = Object.assign({}, res.data);
            form.value.GroupId = res.data.resourceGroupParentId;
            activeStatus.value = res.data.articleStatus;

            articleGroup(form.value.GroupId).then(res => {
                if (res.code == 200) {
                    group2.value = res.data
                }

            })
            for (let i in res.data.picturesList) {
                bannerList.value[i] = Object.assign({}, res.data.picturesList[i])
            }
            if (res.data.articleSource != null) {
                showInput.value = true;
                active.value = 0

            } else {
                active.value = 1
                showInput.value = false;
            }
            form.value.articleSource = res.data.articleSource;
            if (form.value.timingReleaseStatus == true) {
                let time = res.data.timingReleaseTime.split(' ');
                radio1.value = 1;
                date1.value = time[0];
                date2.value = time[1];
                timepickerShow.value = true
            }
            sessionStorage.setItem("initForm", JSON.stringify(form.value))
        }

    })
} else {
    sessionStorage.setItem("initForm", JSON.stringify(form.value))
}
/**日期在今天之前都不能选 */
function disabledDateFun(date) {
    return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;

}
watch(() => date1.value, val => {

})
function disabledTimeFun(time) {
    console.log('time===', time)
    return time.getTime() < Date.now() - 8.64e7
}
/***文章来源 */
function changeSource(val) {
    console.log(val)
    active.value = val
    if (val == 0) {
        showInput.value = true;
        form.value.articleSource = '';
    } else {
        showInput.value = false;
        form.value.articleSource = null;
    }
}
/*** 图片上传成功*/
function UploadSuccess(file) {
    console.log('activeBanner', activeBanner.value)
    for (let i in bannerList.value) {
        if (activeBanner.value == i) {
            bannerList.value[i].mediaUrl = file[0].url;
            bannerList.value[i].name = file[0].fileName
            bannerList.value[i].mediaType = file[0].fileName.substring(file[0].fileName.lastIndexOf(".") + 1);
            return
        }
    }
    form.value.picturesList = bannerList.value

}
/**相册选中的照片 */
function photoChoose(files) {
    console.log('', bannerList.value)
    for (let k in bannerList.value) {
        if (k == files.id) {
            bannerList.value[k].mediaUrl = files.images.url;
            bannerList.value[k].mediaType = files.images.fileSuffix;
            bannerList.value[k].name = files.images.originalName;
            bannerList.value[k].displayType = 2
        }
    }
}
/***相册封面选择 */
function displayType(item, i) {
    // console.log('推荐封面', item, i)
    for (let j in bannerList.value) {
        if (i == j) {
            bannerList.value[j].displayType = 1;
            proxy.$modal.msgSuccess("设置封面成功");
        } else {
            bannerList.value[j].displayType = 2
        }

    }
}
function imgSelect(i) {
    activeBanner.value = i;
}
/**删除图片 */
function imgDelete(index) {
    let count = Number(index) + 1
    proxy.$confirm(`确定移除  第${count}张图片？`, '提示', {
        customClass: 'Leave-model',
    }).then(() => {
        //   选择确定
        if (index == 0) {
            bannerList.value[0].mediaUrl = '';
            bannerList.value[0].mediaType = '';
            bannerList.value[0].name = '';
        }
        if (index == 1) {
            bannerList.value[1].mediaUrl = '';
            bannerList.value[1].mediaType = '';
            bannerList.value[1].name = ''
        }
        if (index == 2) {
            bannerList.value[2].mediaUrl = '';
            bannerList.value[2].mediaType = '';
            bannerList.value[2].name = ''
        }
    }).catch(() => {// 取消则关闭弹窗不执行

    });

}
/**相册选择 */
function choosePic(index) {
    console.log('相册index===', index)
    proxy.$refs.PhotoAlbum.photo(index)
}
/***点击保存 */
function save() {
    proxy.$refs['ruleFormRef'].validate(valid => {
        if (valid) {
            form.value.picturesList = bannerList.value;
            if (form.value.id != undefined) {
                updateArticle(form.value, form.value.id).then(response => {
                    if (response.code == 200) {
                        contentHasSave.value = true;
                        proxy.$modal.msgSuccess("修改成功");
                    }
                })
            } else {
                addArticle(form.value).then(response => {
                    if (response.code == 200) {
                        contentHasSave.value = true
                        proxy.$modal.msgSuccess("保存成功");
                        articleId.value = response.data;
                        form.value.id = articleId.value
                    }

                })
            }
        } else {
            proxy.$modal.msgError("提交失败！");
            return false;
        }
    })
};
/**解析文本内容 */
function GetContent(val) {
    console.log(val)
    form.value.articleContent = val
}
watch([() => form, bannerList], ([newFormValue, newImgValue], [oldFormValue, oldImgValue]) => {
    // console.log('监听的', newFormValue, newImgValue)
    // console.log('form.value', form.value.title)
    flagChange++  // 默认值有变更的话
    //   console.log('flagChange', flagChange)
    window.clearInterval(timer2.value);
    timer2.value = null;
    if (flagChange > 2) {// 说明监听值有变化
        let flagForm = form.value
        let initForm = sessionStorage.getItem('initForm')

        if (flagForm != initForm) {
            //  console.log('flagForm', JSON.stringify(flagForm));
            // console.log('initForm', sessionStorage.getItem('initForm'));
            isChange.value = true //启动自动保存
            timer2.value = setInterval(() => {
                setTimeout(() => {
                    ///调取接口
                    if (isChange.value == true) {
                        autoSave();
                        isChange.value = false
                        contentHasSave.value = false;
                        sessionStorage.setItem("initForm", JSON.stringify(flagForm))
                        // console.log('已经保存后的contentHasSave====', contentHasSave.value)
                        // console.log('isChange.value', isChange.value)
                    } else {
                        window.clearInterval(timer2.value);
                        timer2.value = null
                    }

                }, 0)
            }, 1000 * 60);

        } else {
            window.clearInterval(timer2.value);
            timer2.value = null
        }
    }
}, { deep: true })


/**自动保存 */
function autoSave() {
    proxy.$refs['ruleFormRef'].validate(valid => {
        if (valid) {
            console.log('articleId======', articleId.value, 'form.value.id ==', form.value.id)
            form.value.picturesList = bannerList.value
            // form.value.articleContent = articleContent.value;
            console.log('form.value.picturesList', form.value.picturesList)
            if (form.value.id != undefined) {
                updateArticle(form.value, form.value.id).then(response => {
                    if (response.code == 200) {
                        contentHasSave.value = true;
                        //  console.log('修改保存成功的contentHasSave====', contentHasSave.value)
                    }
                })
            } else {
                addArticle(form.value).then(response => {
                    if (response.code == 200) {
                        contentHasSave.value = true
                        articleId.value = response.data;
                        form.value.id = articleId.value
                        // console.log('新增保存成功的contentHasSave====', contentHasSave.value)
                    }

                })
            }
        }
    })
}
/* 新增每隔5分钟自动执行，标题不为空时执行*/

function titleChange(val) {
    console.log('标题', val)
    // if (val != "") {
    //     timer.value = setInterval(() => {
    //         setTimeout(() => {
    //             ///调取接口
    //             // autoSave()
    //             contentHasSave.value = false
    //         }, 0)

    //     }, 1000 * 60 * 5)
    // }
}
/**退出编辑 */
function ExitEditor() {
    if ($route.query.type == 1) {
        router.push("/contentManage/articleMaterialCenter/articles");
    }
    if ($route.query.type == 2) {
        router.push("/contentManage/articleMaterialCenter/articlesDraftBox");
    }
}
/**选择发布 定时或者立即 */
function Release(e) {
    console.log('发布选择', e)
    if (e == '1') {
        isLight.value = false
    }
    if (e == '2') {
        isLight.value = true;
    }
}
function selectTime(time) {
    console.log('日期选择', time)
    date1.value = time
}
function selectTime2(time) {
    let str = date1.value + ' ' + time
    let date = new Date(str);
    let time1 = date.getTime();
    console.log('time1当前选择的时间', time1);
    // 获取当前时间的时间戳 new Date().getTime()
    console.log('now', new Date().getTime())
    if (time1 < new Date().getTime()) {
        proxy.$modal.msgError("发布时间选择不能小于当前时间");
        date2.value = '';
        timepickerShow.value = false

    } else {
        date2.value = time;
        timepickerShow.value = true;
        form.value.timingReleaseTime = str;
        console.log('时间选择', str)
    }

}
/** 发布前检测内容*/
function validation() {
    let title = form.value.title;
    let subtitle = form.value.subtitle;
    let summary = form.value.summary;
    if (active.value == 1) {
        form.value.articleSource = null;
    }
    let ContentVal = form.value.articleContent;
    //   console.log('form.value.articleContent', form.value.articleContent)

    if (title == '' || title == null) {
        return proxy.$modal.msgError("标题不能为空！");
    };
    if (subtitle == '' || subtitle == null) {
        return proxy.$modal.msgError("副标题不能为空！");
    };
    if (summary == '' || summary == null) {
        return proxy.$modal.msgError("摘要不能为空！");
    };
    if (form.value.articleSource == '') {
        return proxy.$modal.msgError("转载不能为空！");
    };
    if (ContentVal == null || ContentVal == '') {
        return proxy.$modal.msgError("文章内容不能为空！");
    };

}
//立即发布
function releaseSoon() {
    proxy.$refs['ruleFormRef'].validate(valid => {
        let imgsUrl = [];
        for (let i in bannerList.value) {
            imgsUrl.push(bannerList.value[i].mediaUrl);
            if (imgsUrl[0] == "" && imgsUrl[1] == "" && imgsUrl[2] == "") {
                return proxy.$modal.msgError("主图至少要有1张！");
            }

        };
        let title = form.value.title;
        let subtitle = form.value.subtitle;
        let summary = form.value.summary;

        if (active.value == 1) {
            form.value.articleSource = null;
        }

        let ContentVal = form.value.articleContent;
        if (title == '' || title == null) {
            return proxy.$modal.msgError("标题不能为空！");
        };
        if (subtitle == '' || subtitle == null) {
            return proxy.$modal.msgError("副标题不能为空！");
        };
        if (summary == '' || summary == null) {
            return proxy.$modal.msgError("摘要不能为空！");
        };
        if (form.value.articleSource == '') {
            return proxy.$modal.msgError("转载不能为空！");
        };
        if (ContentVal == null || ContentVal == '') {
            return proxy.$modal.msgError("文章内容不能为空！");
        };

        if (valid) {
            form.value.picturesList = bannerList.value;
            form.value.timingReleaseStatus = false;
            form.value.timingReleaseTime = ''
            console.log('articleStatus', form.value.articleStatus)

            let alterStatus = ''
            if (form.value.articleStatus == 0 || form.value.articleStatus == undefined) {
                alterStatus = 'RELEASED'
            }
            if (form.value.articleStatus == 2) {
                alterStatus = 'RESET_RELEASED'
            }
            if (form.value.id != undefined) {
                updateArticle(form.value, form.value.id).then(response => {
                    if (response.code == 200) {
                        contentHasSave.value = true
                        const ids = []
                        ids.push(form.value.id)


                        updateArticleStatus(ids, alterStatus);
                        proxy.$modal.msgSuccess("发布成功");
                        proxy.$router.go(-1)

                    }
                })
            } else {
                addArticle(form.value).then(response => {
                    if (response.code == 200) {
                        articleId.value = response.data;
                        form.value.id = articleId.value;
                        contentHasSave.value = true
                        const ids = []
                        ids.push(form.value.id)
                        updateArticleStatus(ids, alterStatus);
                        proxy.$modal.msgSuccess("发布成功");
                        proxy.$router.go(-1)
                    }

                })
            }
        }
    })

}

//定時发布
function timingReleaseSubmit() {
    validation();
    form.value.picturesList = bannerList.value;
    form.value.timingReleaseStatus = true;
    if (form.value.id != undefined) {
        updateArticle(form.value, form.value.id).then(response => {
            if (response.code == 200) {
                proxy.$modal.msgSuccess("保存成功");
                proxy.$router.go(-1)
            }
        })
    } else {
        addArticle(form.value).then(response => {
            if (response.code == 200) {
                proxy.$modal.msgSuccess("保存成功");
                proxy.$router.go(-1)
            }

        })
    }

}

/**离开编辑页时拦截 */
let backConfirm = false;
onBeforeRouteLeave((to, from, next) => {
    let arr = Object.keys(form.value)
    console.log('arr', arr)
    let title = form.value.title
    if (form.value.timingReleaseStatus == true || isLight.value == true) {

        next();
    }
    if (form.value.timingReleaseStatus == false && isLight.value == false) {
        if (contentHasSave.value == false && title != '') {
            //  next(false)
            proxy.$confirm("当前页面尚未保存，离开页面将会放弃所有数据", '提示', {
                confirmButtonText: '是，离开并删除全部内容',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'Leave-model',

            }).then(() => {
                //   选择确定
                sessionStorage.removeItem('initForm')
                next()
            }).catch(() => {// 取消则关闭弹窗不执行

            })
        } else if (contentHasSave.value == false && title == '') {
            proxy.$confirm("是否要离开文章编辑页", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'Leave-model',

            }).then(() => {
                //   选择确定
                sessionStorage.removeItem('initForm')
                next()
            }).catch(() => {// 取消则关闭弹窗不执行

            })
        }
        else { // 条件不成立则继续往下执行
            next();
        }
    } else {
        next();
    }

});
/***文章分组 */
function getGroup1() {
    articleGroup(parentId.value).then(res => {
        if (res.code == 200) {
            group1.value = res.data
        }

    })
}
function getGroup2() {
    parentId.value = 1000
    articleGroup(parentId.value).then(res => {
        if (res.code == 200) {
            group2.value = res.data;
            console.log('group2.value ', group2.value)
        }

    })
}
function changeGroup(val) {
    parentId.value = val
    group2.value = [],
        form.value.resourceGroupId = ''
    articleGroup(parentId.value).then(res => {
        if (res.code == 200) {
            group2.value = res.data
        }

    })
}
function changeGroup2(val) {
    console.log('组2', val)
}
getGroup1()
getGroup2()
onUnmounted(() => {
    clearInterval(timer.value) //销毁
    timer.value = null;
    clearInterval(timer2.value)
    timer2.value = null
})
onMounted(() => {
    if (sessionStorage.getItem('copyDom')) {
        form.value.articleContent = `<!DOCTYPE html>
            <html>
            <head>
            </head>
            <body>
            ${sessionStorage.getItem('copyDom')}
            </body>
            </html>`
        sessionStorage.removeItem('copyDom')
    } else {
        form.value.articleContent = undefined
    }
})
</script>
